<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button>测试</button>
  <hr>
  <a href="/home">首页</a>
  <a href="/about">关于我们</a>
  <script>
    // history.pushState   push 压入  state 状态
    //为按钮绑定单击事件
    let btn = document.querySelector('button')
    btn.onclick = function(){
      //
      history.pushState({id: 200}, '', '/about')
    }
    //获取所有的 a 元素
    let links = document.querySelectorAll('a');
    //遍历 links 
    links.forEach(item => {
      item.onclick = function(e){
        ///进行无刷新跳转
        history.pushState(null, '', this.href);
        //阻止默认行为
        e.preventDefault();
      }
    })
  </script>
</body>
</html>